<template>
  <view class="all-service">
    <u-navbar title="全部服务" @leftClick="$emit('close')" :border="true" bgColor="#F6F6F6">
        </u-navbar>
    <view class="block">
      <view class="Panel-top" v-for="(item,index) in serviceList" :key="index">
        <view class="Panel">
          <view class="title"><h2>{{ item.title }}</h2></view>
          <view class="two">
            <u-grid :border="false" col="4" @click="clickTwoGrid">
            <u-grid-item v-for="(item,index) in item.data" :key="index" >
							<view class="item">
								<i :class="'iconfont ' + item.icon"></i>
								<span>{{item.text}}</span>
							</view>
            </u-grid-item>
        </u-grid>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: 'all-service',
  components: {},
  data () {
    return {
      checked: false,
      serviceList:[
                {
                  title:'精选工具',
                   data:[
                    {text:'下载管理',icon:'icon-xiazai'},
                    {text:'客服中心',icon:'icon-kefu'},
                    {text:'大字模式',icon:'icon-zitifangda'},
                    {text:'夜间模式',icon:'icon-yejian'},
                    {text:'消息',icon:'icon-xiaoxi'},
                  ]
                },
                {
                  title:'创作中心',
                   data:[
                    {text:'创作首页',icon:'icon-chuangzuo'},
                    {text:'数据助手',icon:'icon-shujukanban'},
                    {text:'收益提现',icon:'icon-licaishouyi'},
                    {text:'活动广场',icon:'icon-huodong'},
                  ]
                },
                {
                  title:'我的内容',
                   data:[
                    {text:'浏览历史',icon:'icon-lishi'},
                    {text:'评论',icon:'icon-pinglun'},
                    {text:'点赞',icon:'icon-dianzan'},
                    {text:'收藏',icon:'icon-shoucang'},
                  ]
                },
                {
                  title:'我的服务',
                   data:[
                    {text:'钱包',icon:'icon-xiazai'},
                    {text:'借钱',icon:'icon-pinglun'},
                    {text:'免流量',icon:'icon-dianzan'},
                    {text:'我的订单',icon:'icon-shoucang'},
                    {text:'优惠券',icon:'icon-shoucang'},
                    {text:'地址管理',icon:'icon-shoucang'},
                    {text:'任务',icon:'icon-shoucang'},
                  ]
                },
              ]
    }
  },
  methods: {
    clickTwoGrid(e){
      console.log(e);
    },
    goMyContent () {
      uni.$u.route('/pages/user/mycontent')
    },
    onNo () {
      console.log('功能未实现')
    },
    leftClick(){
      uni.navigateBack()
    }
  }
}
</script>
<style lang="scss" scoped>
.all-service {
  width: 100vw;
  height: auto;
  background-color: rgb(246, 246, 246);
}
.van-nav-bar {
  background-color: rgb(246, 246, 246);
  border-bottom: 1px solid rgb(244, 243, 243);
}
.block {
  padding: 0px 15px;
  margin: 55px 0px;
}

.Panel-top {margin-top: 10px;}
.Panel {
  overflow: hidden;
  border-radius: 6px;
  padding: 5px 0px;
  background-color: #fff;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 10px 15px 5px 15px;
    font-size: 14px;
    color: #8585e0;
    h2 {
      margin: 0;
      color: #323233;
      font-size: 16px;
    }
  }
}
.two {
  ::v-deep .van-grid-item__content {
    text-align: center;
  }
 .item{
    display: flex;
    flex-direction: column;
    align-items: center;
		margin: 10px 0px;
    .iconfont{
      font-size: 30px;
      margin-bottom: 3px;
    }
    font-size:14px;
  }
}
</style>
